.chip {
    white-space: nowrap;
    user-select: none;

    &.selected {
        background: var(--brand-alpha-medium);
        color: var(--brand-on-background-medium);

        &:hover,
        &:focus {
            background: var(--brand-alpha-medium);
        }

        &:active {
            background: var(--brand-alpha-weak);
            color: var(--brand-on-background-weak);
        }
    }

    &.unselected {
        background: var(--neutral-alpha-weak);
        color: var(--neutral-on-background-medium);

        &:hover,
        &:focus {
            background: var(--neutral-alpha-medium);
        }

        &:active {
            background: var(--neutral-alpha-weak);
            color: var(--neutral-on-background-weak);
        }
    }

    &:disabled {
        background: var(--neutral-solid-weak);
        cursor: not-allowed;
    }
}
